const path = require('path')
const htmlWebpackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')

const htmlPlugin = new htmlWebpackPlugin({
	template: path.join(__dirname, './src/index.html'),
	filename: 'index.html'
})

const cssPlugin = new MiniCssExtractPlugin({
	filename: 'css/index.css'
})
module.exports = {
	mode: 'development', //development  production
	entry: './src/main',
	plugins: [htmlPlugin, cssPlugin],
	module: {
		//所有第三方匹配规则
		rules: [
			{
				test: /\.js|jsx$/,
				use: {
					loader: 'babel-loader',
					options: {
						presets: ['@babel/preset-env']
					}
				},
				exclude: /node_modules/
			}, // 添加排除项
			{
				test: /\.css$/,
				// use: [MiniCssExtractPlugin.loader, 'css-loader'],
				use: ['style-loader', 'css-loader']
			},
			{
				test: /\.scss$/,
				use: [
					// MiniCssExtractPlugin.loader,
					'style-loader',
					{
						loader: 'css-loader',
						options: {
							modules: {
								mode: 'local',
								exportGlobals: true,
								localIdentName: '[name]_[local]',
								context: path.resolve(__dirname, 'src')
							}
						}
					},
					'sass-loader'
				]
			},
			{
				test: /\.woff|ttf|woff2|eot|svg$/,
				use: 'url-loader'
			},
			{
				test: /\.tsx$/,
				loaders: [
					{
						loader: 'babel-loader',
						options: {
							presets: ['@babel/preset-env']
						}
					},
					'ts-loader'
				],
				exclude: /node_modules/
			}
		]
	},
	resolve: {
		extensions: ['.js', '.jsx', '.tsx', '.ts'],
		alias: {
			'@': path.join(__dirname, './src/')
		}
	}
}
